<template>
    <div>
        <h3>AJAX请求的API模块化</h3>
        <pre>
        - 用于统一定义和设置全局方法，全局属性，全局过滤器，全局指令，全局组件 ……
        - 构成方法依赖于插件安装方法 Vue.use() , 该方式将装载功能作为当模块安装至Vue全局功能上
            - Vue.use() 方法一般被定义在 main.js 文件中
            - Vue.use(options) 为一个固定构建对象
            - options 取值 ： { install:function(Vue){} }
        </pre>
        <pre>
        1、在src下新建一个定义ajax请求的模块文件夹
            例如 src/api/
                    - index.js
            > 该模块的开发基于 NODE 语法和 ES6 模块语法安装页面逻辑进行开发即可

            - 1.1 将模块导出规则依据与 Vue 插件语法的特性定义为如下导出对象
            <code>
                export default {
                    install:function(Vue){
                        // 基于Vue构造器进行扩展
                    }
                }
            </code>
        2、将开发的api模块在main.js 中完成组件的共享定义
            <code>
                import api from './api'
                // Vue.prototype.$api = api;
                Vue.use(api);
            </code>
        3、在组件中通过 vm.$api 执行相关请求方法，完成数据加载
        </pre>
        <pre>{{films}}</pre>
        <input type="button" value="加载电影列表" @click="loadFilmList()">
        <input type="button" value="加载电影列表" @click="loadFilmListA()">

    </div>
</template>

<script>
export default {
    data(){
        return {
            films:[]
        }
    },
    methods:{
        loadFilmList(){
            this.$api.loadFilmList({
                size:2,
                no:2
            }).then(({ msg,resultState,result })=>{
                if(resultState){
                    this.films = result
                }else{
                    alert(msg.msg)
                }
            }).catch((error)=>{
                alert(this.$api.code[error.message]);
            })
        },
        async loadFilmListA(){
            try {
                let { msg,resultState,result } = await this.$api.loadFilmList({
                    size:2,
                    no:2
                });
                if(resultState){
                    this.films = result
                }else{
                    alert(msg.msg)
                }
            } catch (error) {
                 alert(this.$api.code[error.message]);
            }
        }
    }

}
</script>